<!DOCTYPE html>
<!-- 了解表格的基本用法 -->
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>表格</title>
    </head>
    <body>

        <div>
            <ul>
                <li>table 表示表格</li>
                <li>tr 表示表格中的行 ( table row )</li>
                <li>td 表示表格行中的单元格 ( table data cell )</li>
                <li>th 表示表格行中的表格头 ( table header cell )</li>
            </ul>
        </div>

        <!-- 使用 table 的 border 属性可以设置整个表格的边框粗细 -->
        <!-- 当 table 的 border 取值为正整数时，表格内部的单元格也会拥有边框 -->
        <!-- 使用 bordercolor 属性可以设置边框的颜色( 表格的边框 和 内部单元格的边框 都会变化 ) -->
        <!-- 使用 table 的 align 属性可以设置 表格水平方向的排列方式 ( left | center | right )-->
        <table border="5" bordercolor="red" align="center">
            <tr>
                <td>第1行第1格</td>
                <td>第1行第2格</td>
                <td>第1行第3格</td>
                <td>第1行第4格</td>
            </tr>
            <tr>
                <td>第2行第1格</td>
                <td>第2行第2格</td>
                <td>第2行第3格</td>
                <td>第2行第4格</td>
            </tr>
            <tr>
                <td>第3行第1格</td>
                <td>第3行第2格</td>
                <td>第3行第3格</td>
                <td>第3行第4格</td>
            </tr>
        </table>

        <hr>

        <!-- 使用 table 的 cellspacing 属性 用来 设置 单元格 间距 -->
        <!-- 使用 table 的 cellpadding 属性 用来 设置 单元格 内边距 -->
        <table border="1" cellspacing="50" cellpadding="30" >
            <tr>
                <td>11</td>
                <td>12</td>
                <td>13</td>
                <td>14</td>
            </tr>
            <tr>
                <td>21</td>
                <td>22</td>
                <td>23</td>
                <td>24</td>
            </tr>
            <tr>
                <td>31</td>
                <td>32</td>
                <td>33</td>
                <td>34</td>
            </tr>
            <tr>
                <td>41</td>
                <td>42</td>
                <td>43</td>
                <td>44</td>
            </tr>
            <tr>
                <td>51</td>
                <td>52</td>
                <td>53</td>
                <td>54</td>
            </tr>
        </table>
        
    </body>
</html>